.table {
	background-color: $white;
	border: 1px solid $black-bg;
	margin-top: $margin-md;
	margin-bottom: $margin-md;
	width: 100%;
	.card-table > & {
		border: 0;
		margin-right: ($grid-gutter * -1);
		margin-left: ($grid-gutter * -1);
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
	}
	> tbody {
		> tr:hover {
			background-color: $white-bg-dark;
		}
		.card-table > &,
		.card-table > .table-responsive > & {
			&:first-child > tr:first-child {
				td,
				th {
					border-top: 0;
				}
			}
		}
	}
	td,
	th {
		border-top: 1px solid $black-bg;
		font-size: $font-size;
		line-height: $line-height;
		padding: (($cell-height - $line-height) / 2 - 1) $grid-gutter (($cell-height - $line-height) / 2);
		vertical-align: top;
		&.nowrap {
			white-space: nowrap;
			width: 1%;
		}
	}
	> thead {
		td,
		th {
			color: $black-hint;
			font-size: $font-size-h6;
			vertical-align: bottom;
		}
		.card-table > &,
		.card-table > .table-responsive > & {
			&:first-child > tr:first-child {
				td,
				th {
					border-top: 0;
				}
			}
		}
	}
}

.table-responsive {
	margin-top: $margin-md;
	margin-bottom: $margin-md;
	min-height: 0.01%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	.card-table > & {
		margin-right: ($grid-gutter * -1);
		margin-left: ($grid-gutter * -1);
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
		> .table {
			border: 0;
		}
	}
	> .table {
		margin: 0;
	}
}